<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" @close="handleClose" center top="14vh" width="80%" append-to-body :fullscreen="fullscreen">
        <el-form :model="dialogForm" size="small" :disabled="type==3" label-suffix=":" ref="detailForm" label-width="100px">

            <el-row>
                <el-table max-height="350" border stripe :data="dialogForm.stemVoList">
                    <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                    <el-table-column :label="$t('mrbForm.supplierBatchNo')" prop="lichn" align="center" show-overflow-tooltip />
                    <el-table-column :label="$t('mrbForm.supplierNo')" prop="supplierCode" align="center" show-overflow-tooltip />
                    <el-table-column :label="$t('mrbForm.materialNo')" prop="materialCode" align="center" show-overflow-tooltip />
                    <el-table-column :label="$t('mrbForm.materialName')" prop="materialName" align="center" show-overflow-tooltip />
                    <!-- <el-table-column :label="$t('mrbForm.materialName')" prop="materialType" align="center" show-overflow-tooltip /> -->
                    <el-table-column :label="$t('mrbForm.initiateFactory')" prop="factoryName" align="center" show-overflow-tooltip />
                    <el-table-column :label="$t('mrbForm.batchNo')" prop="lot" align="center" show-overflow-tooltip />
                    <el-table-column :label="$t('mrbForm.incomingQuantity')" prop="batchAmount" align="center" show-overflow-tooltip />
                    <el-table-column label="缺陷选择" align="left" fixed="right" min-width="260" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <div class="action-wrap" :key="index" v-for="(item, index) in scope.row.flawList" style="margin-top: 5px">
                                <el-input style="width: 40%; margin-left: 5px" v-model="item.minFlawName" size="small" />
                                <!-- <el-select v-model="item.minFlawName" style="width: 40%" placeholder="缺陷选择" @visible-change="(e)=>showSelect(e,scope.row.materialType)" clearable size="small">
                                    <el-option v-for="flaw in minFlawOptions" @click.native="changeFlaw(flaw,scope,index)" :key="flaw.id" :label="flaw.minFlawName" :value="flaw.minFlawName" />
                                </el-select> -->
                                <el-input style="width: 40%; margin-left: 5px" v-model="item.minFlawNr" size="small" />
                            </div>
                            <!-- <el-select v-model="scope.row.minFlawName" :placeholder="$t('public.select_holder',{select_holder: '缺陷选择'})" filterable size="small">
                                            <el-option v-for="item in minFlawOptions" :key="item.id" :label="item.minFlawName" :value="item.minFlawName" />
                                        </el-select> -->
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('mrbForm.containAddress')" prop="stemName" align="center" show-overflow-tooltip v-if="dialogForm.whetherStem == 1">
                        <template slot-scope="scope">
                            <div v-for="(item,index) in scope.row.stemVoList" :key="index">
                                <div v-if="item.stemName && item.stemNumber">{{item.stemName}} / {{item.stemNumber}}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column :label="$t('mrbForm.unqualifiedQuantity')" prop="onlineUnqualified" align="center" show-overflow-tooltip /> -->

                </el-table>
            </el-row>

            <el-row style="margin-top: 20px">
                <el-form-item :label="$t('mrbForm.flawDescription')">
                    <el-input type="textarea" v-model="dialogForm.flawDescription" />
                    <!-- <el-link type="primary" @click.native="downloadFile(item)" v-for="(item,index) in flawFiles" :key="index" :underline="true">{{item.originalFileName}}</el-link> -->
                </el-form-item>
                <el-form-item :label="$t('mrbForm.attachment')" v-show="flawFiles.length>0">
                    <file-upload v-model="uploadAttachments" :otherList="flawFiles" ref="incomingFiles" :bizId="dialogForm.id" disabled></file-upload>
                </el-form-item>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:visible',false)" :loading="loading" icon="el-icon-close" size="small">{{$t('public.close')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { getNcrReviewDetail } from '@/api/inventoryManagement/ncrReview'
import { geFileByBiz } from '@/api/file/file'
import { saveAs } from 'file-saver'
export default {
    name: 'ncrList-detial',
    props: {
        value: {
            type: Object,
        },
        visible: {
            type: Boolean,
            default: false,
        },
        type: [String, Number], //1:新增  2：编辑 3：查看
    },
    watch: {
        value(val) {
            this.dialogForm.row = { ...val }
        },
        visible(val) {
            if (val) {
                this.getDetail()
            }
        },
    },
    computed: {
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            const { type } = this
            let title = ''
            if (type == 3) {
                title = '查看MRB评审单'
            }
            return title
        },
    },
    data() {
        return {
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            factoryOptions: undefined,
            dialogForm: {},
            flawFiles: [],
            specificaFiles: [],
            uploadAttachments:{}
        }
    },
    methods: {
        getDetail() {
            getNcrReviewDetail(this.value.id).then((res) => {
                if (res.code == 200) {
                    this.dialogForm = {
                        ...res.data,
                        row: this.dialogForm.row,
                        factoryName: this.dialogForm.row.factoryName,
                    }
                    this.dialogForm.stemVoList = this.dialogForm.voList.map(
                        (i) => {
                            i = { ...i, ...this.dialogForm.row }
                            return i
                        }
                    )
                    this.getFiles(res.data.groupId)
                    console.log(this.dialogForm)
                }
            })
        },
        getFiles(id) {
            geFileByBiz({ bizId: id }).then((res) => {
                res.data.forEach((io) => {
                    if (io.bizType === 'SPECIFICATION_UPLOAD') {
                        this.specificaFiles.push(io)
                    }
                    if (io.bizType === 'FLAW_UPLOAD') {
                        this.flawFiles.push(io)
                    }
                })
            })
        },
        handleClose(done) {
            this.$emit('update:visible', false)
            this.flawFiles = []
            this.specificaFiles = []
        },
        downloadFile(file) {
            saveAs(file.url, file.originalFileName)
        },
    },
}
</script>

<style scoped>
</style>
